<template>
    <div>
        <el-menu class="el-menu-vertical-demo" style="text-align:left" default-active="2" :collapse-transition="true"
                 background-color="#222D32" text-color="#fff" :unique-opened="true" router
                 active-text-color="#ffd04b">
            <el-menu-item index="/home">
                <i class="el-icon-house"></i>
                <span slot="title">首页</span>
            </el-menu-item>
            <NavMenu :navList="navList"></NavMenu>
        </el-menu>
    </div>

</template>

<script>
    import NavMenu from "./NavMenu";

    export default {
        components: {
            NavMenu
        },
        name: "HelloWorld",
        data() {
            return {
                navList: [
                    {
                        "id": 99,
                        "menuName": "系统管理",
                        "pid": "0",
                        "url": "#",
                        "icon": "el-icon-setting",
                        "sort": 7,
                        "deep": 1,
                        "code": "statistics",
                        "resource": "statistics",
                        "children": [
                            {
                                "id": 109,
                                "menuName": "用户管理",
                                "pid": "99",
                                "url": "/statistics/core",
                                "icon": null,
                                "sort": 1,
                                "deep": 2,
                                "code": "statistics.core",
                                "resource": "statistics.core",
                            },
                            {
                                "id": 109,
                                "menuName": "角色管理",
                                "pid": "99",
                                "url": "/statistics/core",
                                "icon": null,
                                "sort": 1,
                                "deep": 2,
                                "code": "statistics.core",
                                "resource": "statistics.core",
                            },
                            {
                                "id": 109,
                                "menuName": "部门管理",
                                "pid": "99",
                                "url": "/statistics/core",
                                "icon": null,
                                "sort": 1,
                                "deep": 2,
                                "code": "statistics.core",
                                "resource": "statistics.core",
                            },
                        ]
                    },
                    {
                        "id": 123,
                        "menuName": "Bug管理",
                        "pid": "99",
                        "url": "#",
                        "icon": "el-icon-document",
                        "sort": 2,
                        "deep": 2,
                        "code": "statistics.yyyw",
                        "resource": "statistics.yyyw",
                        "children": [
                            {
                                "id": 124,
                                "menuName": "bug列表",
                                "pid": "123",
                                "url": "/tjbb/Operaional",
                                "icon": null,
                                "sort": 5,
                                "deep": 3,
                                "code": "statistics.yunying",
                                "resource": "statistics.yunying",
                            },
                            {
                                "id": 124,
                                "menuName": "bug新增",
                                "pid": "123",
                                "url": "/tjbb/Operaional",
                                "icon": null,
                                "sort": 5,
                                "deep": 3,
                                "code": "statistics.yunying",
                                "resource": "statistics.yunying",
                            },

                        ]
                    },
                    {
                        "id": 115,
                        "menuName": "项目管理",
                        "pid": "99",
                        "url": "#",
                        "icon": "el-icon-collection",
                        "sort": 3,
                        "deep": 2,
                        "code": "poi",
                        "resource": "poi",
                        "children": [
                            {
                                "id": 116,
                                "menuName": "项目列表",
                                "pid": "115",
                                "url": "/tjbb/riskbb",
                                "icon": null,
                                "sort": 1,
                                "deep": 3,
                                "code": "statistics.risk",
                                "resource": "statistics.risk",
                            },
                            {
                                "id": 116,
                                "menuName": "文档管理",
                                "pid": "115",
                                "url": "/tjbb/riskbb",
                                "icon": null,
                                "sort": 1,
                                "deep": 3,
                                "code": "statistics.risk",
                                "resource": "statistics.risk",
                            },
                        ]
                    },
                    {
                        "id": 117,
                        "menuName": "数据统计",
                        "pid": "115",
                        "url": "/tjbb/csbb",
                        "icon": "el-icon-pie-chart",
                        "sort": 2,
                        "deep": 3,
                        "code": "statistics.dun",
                        "resource": "statistics.dun",
                    },

                ],
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                var path = keyPath[keyPath.length - 1]
                console.log("sss");
                this.$router.push(path)

            },
        }
    };
</script>

<style scoped lang="less" scoped>

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html,
    body,
    #app {
        width: 100%;
        height: 100%;
    }

    .warp-container {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .warp-left {
        width: 240px;
        height: 100%;
        border-right: 1px solid #e6e6e6;
    }

    .warp-right {
        flex: 1;
    }

    .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .el-menu {
        border-right: none;
    }

    .flex {
        display: flex;
    }

    .flex-auto {
        flex: 1;
    }

    /deep/ .el-icon-arrow-down {
        right: -5px;
    }

    /deep/ .el-submenu__title {
        padding-right: 0;
        //padding-left-: 38px;
    }

    .el-avatar {
        background-color: rgba(0, 0, 0, 0);
    }

    .Icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-top: 10px;
        margin-bottom: -10px;
    }

    .el-menu {
        border-right-width: 0;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 170px;
        min-height: 400px;
        overflow: hidden;
    }

    /deep/ .el-submenu__icon-arrow {
        margin-right: 20px;
    }

    #framework {
        width: 100%;
        height: 98vh;
        display: flex;

        #sidebar {
            height: 100vh;
            background: #20222a;
            overflow: auto;
            transition: width 0.25s;
            -webkit-transition: width 0.25s;
            -moz-transition: width 0.25s;
            -webkit-transition: width 0.25s;
            -o-transition: width 0.25s;

            #logo {
                color: #bdbdc0;
                height: 60px;

                span {
                    background-color: rgba(0, 0, 0, 0);
                    display: block;
                    text-align: center;
                    position: relative;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        #right {

            flex: 1;
            overflow: hidden;

            /deep/ #topbar {
                position: sticky;
                top: 0px;
                width: 100%;
            }

            #mainOut {
                height: calc(~"100% - 80px");;
                padding: 10px;
                padding-bottom: 0px;
                overflow-y: auto;
                background: white;
                /*.panel {*/
                /*background: white;*/
                /*border-radius: 5px;*/
                /*height: 100%;*/
                /*}*/

                #main {

                    // height: 1500px;
                    .backTop {
                        font-size: 32px;
                        color: #409eff;
                    }
                }

                #footer {
                    margin-top: 10px;
                }

            }
        }
    }
</style>
